.meizhuo-dashboard {
	height: 100%;
	color: #ffffff;
	background: url("@/assets/images/dashboard/meizhuo/dashboard-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	* {
		box-sizing: border-box;
	}

	$label-color: #97adbb;
	.header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		font-size: 15px;
		background: url("@/assets/images/dashboard/meizhuo/header.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		.left {
			width: 30%;
		}
		.right {
			width: 30%;
			.el-link {
				padding: 5px 10px;
				background: #1851a5;
				border: 1px solid #0070cc;
				border-radius: 4px;
				.iconfont {
					padding-left: 5px;
					font-size: 25px;
				}
				&:hover {
					opacity: 0.8;
				}
			}
		}
		.system-name {
			font-size: 25px;
			font-weight: 400;
			color: #eeeeee;
			text-align: center;
			text-shadow: 0 6px 8px #042d6a;
			letter-spacing: 2px;
		}
		.toggle-fullscreen {
			right: 180px;
			&.el-link {
				top: 8px;
				border: 1px solid #0070cc;
				border-radius: 4px;
				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
	.main {
		height: calc(100% - 50px);
		padding: 15px;
		.main-body {
			position: relative;
			height: 100%;
			.root-container {
				position: absolute;
				.container {
					padding-right: 0;
					padding-left: 0;
					.bg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
						width: 100%;
						height: 100%;
						content: " ";
						background: url("@/assets/images/dashboard/meizhuo/block-bg.png");
						background-repeat: no-repeat;
						background-position: center;
						background-size: 100% 100%;
					}
					.el-link.more {
						position: absolute;
						top: 0;
						right: 0;
						padding: 5px 10px;
						padding: 14px 30px;
						color: #c8cdff;
						&:hover {
							opacity: 0.8;
						}
					}
					.block {
						position: relative;
						z-index: 9;
						width: 100%;
						height: 100%;
						.block-title {
							position: relative;
							height: 45px;
							padding-left: 35px;
							line-height: 1;
							background: url("@/assets/images/dashboard/meizhuo/list-header-2.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100% 100%;
						}
					}
					.device-total {
						.label {
							color: $label-color;
						}
						.val {
							font-size: 28px;
							font-weight: bold;
						}
						.device-total-count {
							width: 150px;
							height: 150px;
							padding-top: 40px;
							text-align: center;
							background: url("@/assets/images/dashboard/meizhuo/device-total.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100% 100%;
							.val {
								font-size: 30px;
								font-weight: bold;
							}
						}
						.line {
							width: 100%;
							height: 30px;
							margin-top: -10px;
							background: url("@/assets/images/dashboard/meizhuo/line.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100% 100%;
						}
						.device-total-count2 {
							width: 60%;
							.row1,
							.row2 {
								padding: 0 0 0 10%;
							}
							.row1 {
								.val {
									color: #0dffc5;
								}
							}
							.row2 {
								padding-top: 20px;
								.val {
									font-size: 26px;
								}
								.item-1 {
									.val {
										color: #adada9;
									}
								}
								.item-2 {
									padding-right: 20px;
									.val {
										color: #ffe600;
									}
								}
							}
							.icon {
								width: 50px;
								height: 50px;
								margin-right: 10px;
								background: url("@/assets/images/dashboard/meizhuo/device-online.png");
								background-repeat: no-repeat;
								background-position: center;
								background-size: 100% 100%;
								opacity: 0.9;
							}
							.icon-1 {
								background: url("@/assets/images/dashboard/meizhuo/device-online.png");
							}
							.icon-2 {
								background: url("@/assets/images/dashboard/meizhuo/device-oflline.png");
							}
							.icon-3 {
								background: url("@/assets/images/dashboard/meizhuo/device-disable.png");
							}
						}
					}
					.device-type-chart {
						.chart-left {
							.chart-bg {
								top: 50%;
								left: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 60%;
								background: url("@/assets/images/dashboard/meizhuo/pig-bg2.png");
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								transform: translate(-50%, -50%);
								.value {
									font-size: 30px;
								}
								.label {
									color: $label-color;
								}
							}
						}
						.chart-right {
							display: grid;
							.item {
								display: flex;
								align-items: center;
								line-height: 35px;
								.item-label {
									align-items: center;
									.legend {
										width: 10px;
										height: 10px;
										margin-right: 10px;
									}
								}
								.item-value {
									padding-left: 10px;
								}
							}
						}
					}
					.alarm-basic-total {
						position: relative;
						.item {
							display: flex;
							flex-direction: column;
							align-items: center;
							text-align: center;
							.icon {
								width: 60px;
								height: 40px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: 100% 100%;
								&.icon-1 {
									background: url("@/assets/images/dashboard/meizhuo/2.png");
								}
								&.icon-2 {
									background: url("@/assets/images/dashboard/meizhuo/3.png");
								}
								&.icon-3 {
									background: url("@/assets/images/dashboard/meizhuo/4.png");
								}
								&.icon-4 {
									background: url("@/assets/images/dashboard/meizhuo/5.png");
								}
							}
							.label {
								width: 160px;
								max-width: 70%;
								height: 25px;
								margin-top: 15px;
								line-height: 25px;
								background: url("@/assets/images/dashboard/meizhuo/6.png");
								background-repeat: no-repeat;
								background-position: center;
								background-size: 100% 100%;
								opacity: 0.8;
							}
							.val {
								margin-top: 15px;
								font-size: 22px;
								font-weight: 700;
							}
						}
						&::after {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 5px;
							height: 80%;
							content: "";
							background: url("@/assets/images/dashboard/meizhuo/1.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100% 100%;
							opacity: 0.6;
							transform: translateY(-50%);
						}
					}
					.workorder-chart {
						.chart-left {
							background: url("@/assets/images/dashboard/meizhuo/pie-bg.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: contain;
						}
						.chart-right {
							.icon {
								width: 50px;
								height: 50px;
								background: url("@/assets/images/dashboard/meizhuo/7.png");
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
							}
							.info {
								padding-left: 15px;
								.val {
									font-size: 28px;
									font-weight: 700;
								}
								.label {
									color: $label-color;
								}
							}
						}
					}
				}
				&.row1-left,
				&.row2-left {
					left: 0;
					width: 33%;
					height: 30%;
				}
				&.row3-left {
					bottom: 0;
					left: 0;
					width: 73%;
					height: 40%;
				}
				&.row1-center,
				&.row2-center {
					left: 33%;
					width: 40%;
					height: 30%;
				}
				&.row1-right,
				&.row2-right {
					right: 0;
					width: 27%;
					height: 30%;
				}
				&.row3-right {
					right: 0;
					bottom: 0;
					width: 27%;
					height: 40%;
				}
				&.row2-left,
				&.row2-center,
				&.row2-right {
					top: 30%;
				}
			}
		}
		::-webkit-scrollbar {
			width: 5px;
			height: 8px;
			background-color: green;
			border-radius: 5px;
		}

		/* 滑块  */
		::-webkit-scrollbar-thumb {
			background-color: var(--airoom-active-bg);
			border-radius: 5px;
		}

		/* 背景 */
		::-webkit-scrollbar-track {
			background-color: var(--airoom-table-header-bg);
			border-radius: 5px;
		}
	}
}
